import React from 'react';
import { Row, Col, Timeline, message, Statistic, Divider, Table, Modal } from 'antd';
import { ClockCircleOutlined, PieChartOutlined, LineChartOutlined, MinusCircleOutlined, StarOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
import { Url, } from '../url';

import { Typography, Space, Tag, Button } from 'antd';

const { Text, Link, Title } = Typography;

const { confirm } = Modal;
export class Bid extends React.Component {

    state = {
        bidList: []
    }

    currentUser = {}
    componentDidMount = () => {
        if (localStorage.getItem("user") == null) {
            message.info("Please login first")
            setTimeout(() => {
                window.location.href = "/#/login";
            }, 50);
        } else {
            this.currentUser = JSON.parse(localStorage.getItem("user"));

            if (this.currentUser.admin) {
                message.error("Admin is not allowed to bid.");
                setTimeout(() => {
                    window.location.href = "/#/admin";
                }, 500);
            } else {


                this.getBidList();
            }
        }
    }


    getBidList = () => {
        axios.get(Url.bidAll + this.currentUser.userId).then(response => {
            // console.log(response);
            this.setState({
                bidList: response.data
            })
        }).catch(error => {
            message.error("Internal error.")
        });
    }



    render = () => {

        const getWinTag = (bid) => {

            if (bid.win) {
                return <Tag color="purple" icon={<StarOutlined />}>Win</Tag>;
            } else {
                if (bid.ask.state === "finish") {
                    return <Tag icon={<MinusCircleOutlined />} color="default">
                        Miss
                    </Tag>
                } else if (bid.ask.state === "cancel") {
                    return <Tag icon={<MinusCircleOutlined />} color="default">
                        Canceled
                    </Tag>
                }
                else {
                    return <span></span>
                }
            }
        }

        const timeLine = this.state.bidList.map(bid => {


            return (
                <Timeline.Item key={bid.bidId} dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}
                    label={<div style={{ fontWeight: "bold", fontSize: 15 }}>{(new Date(bid.bidTime)).toLocaleDateString() + " " + (new Date(bid.bidTime)).toLocaleTimeString()}</div>}>
                    <div style={{ fontWeight: "bold", fontSize: 20 }}>
                        <a href={"/#/ask/" + bid.ask.askId}>{bid.ask.name}</a>
                        <span style={{ marginLeft: "8px", marginRight: "8px" }}> <Text type="secondary">({bid.ask.company})</Text></span>
                        {
                            getWinTag(bid)
                        }
                    </div>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Statistic title="Bid Price (USD)" value={bid.bidPrice} precision={2} formatter={(value) => <span style={{ color: "darkgreen" }}>{value} USD</span>} />
                        </Col>
                        <Col span={12}>
                            <Statistic title="Budget (USD)" value={bid.ask.cost} precision={2} formatter={(value) => <span style={{ color: "darkred" }}>{value} USD</span>} />
                        </Col>
                    </Row>
                    <div>
                        <a href={Url.downloadFile + "/" + bid.file}>Preview Docunment</a>
                    </div>
                    {
                        (new Date()).getTime() < bid.ask.startTime || (new Date()).getTime() > bid.ask.endTime || bid.ask.state === 'cancel' || bid.ask.state === 'finish' ? <span></span> :
                            <Button style={{ marginTop: "16px", marginBottom: "36px" }} type="primary" danger size="small"

                                onClick={
                                    () => {

                                        confirm({
                                            title: 'Do you Want to delete these items?',
                                            icon: <ExclamationCircleOutlined />,
                                            content: 'Some descriptions',
                                            okText: "OK",
                                            cancelText: "Cancel",
                                            onOk: () => {
                                                axios.get(Url.deleteBid + bid.id).then(
                                                    response => {
                                                        message.success("Delete bid success");
                                                        this.getBidList();
                                                    }
                                                ).catch(error => {
                                                    message.error("Error delete bid");
                                                })
                                            },
                                            onCancel: () => {

                                            },
                                        });
                                    }
                                }
                            >
                                Cancel This Bid
                            </Button>
                    }
                </Timeline.Item >
            )
        });

        const columns = [
            {
                title: 'Project',
                dataIndex: 'ask',
                key: 'name',
                render: (text, record) => <div style={{ color: "darkblue" }}><a href={"/#/ask/" + record.askId}>{text.name}</a></div>,
            },
            {
                title: 'Bid Price',
                dataIndex: 'bidPrice',
                key: 'bidPrice',
            },
            {
                title: 'Budget',
                dataIndex: 'ask',
                key: 'cost',
                render: (text, record) => <div style={{ color: "darkred" }}>{text.cost}</div>
            }
        ];

        const winBidList = this.state.bidList.filter(each => each.win);
        console.log(winBidList);

        return (
            <div style={{ width: "100%", display: "flex", justifyContent: "center", backgroundColor: "#f0f0f0" }}>
                <div style={{ width: "75%", paddingTop: "32px", paddingLeft: "32px", paddingRight: "32px", backgroundColor: "white" }}>

                    <Row>
                        <Col span={8}>
                            <Divider>Basic Information</Divider>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic
                                        title="Your Total Bidding"
                                        value={this.state.bidList.length}
                                        valueStyle={{ color: '#cf1322' }}
                                        prefix={<PieChartOutlined />}
                                    />
                                </Col>
                                <Col span={12}>
                                    <Statistic
                                        title="Your Win Bidding"
                                        value={winBidList.length}
                                        valueStyle={{ color: '#cf1322' }}
                                        prefix={<LineChartOutlined />}
                                    />
                                </Col>
                            </Row>
                            <div style={{ marginBottom: "32px" }}></div>
                            <Divider>Won Bidding</Divider>
                            <Table columns={columns} dataSource={winBidList} />
                        </Col>
                        <Col span={14}>

                            <div style={{ width: "100%", marginBottom: "32px", textAlign: "center" }}>
                                <Title level={2}>Your Bidding History</Title>
                            </div>
                            <Timeline mode={'left'}>
                                {timeLine}
                            </Timeline>
                        </Col>
                        <Col span={2}>
                        </Col>
                    </Row>

                </div>
            </div >
        )
    }
}